<template>
  <view class="container">
    <!-- Header -->
    <view class="header">
      <text class="title">Notifications</text>
      <view class="header-actions">
        <u-button 
          type="primary" 
          size="mini"
          icon="plus"
          @click="showAddNotification"
        >Add Reminder</u-button>
      </view>
    </view>

    <!-- Filter Tabs -->
    <view class="filter-tabs">
      <scroll-view scroll-x class="tabs-scroll">
        <view class="tabs">
          <view 
            v-for="tab in tabs" 
            :key="tab.value"
            :class="['tab', activeTab === tab.value ? 'active' : '']"
            @click="activeTab = tab.value"
          >
            {{ tab.label }}
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- Notifications List -->
    <scroll-view scroll-y class="content">
      <view class="notifications-list">
        <view 
          v-for="notification in filteredNotifications" 
          :key="notification.id"
          class="notification-card"
          :class="{ 'unread': !notification.read }"
        >
          <view class="notification-icon">
            <u-icon 
              :name="getNotificationIcon(notification.type)"
              :color="getNotificationColor(notification.type)"
              size="32"
            ></u-icon>
          </view>
          <view class="notification-content">
            <view class="notification-header">
              <text class="notification-title">{{ notification.title }}</text>
              <text class="notification-time">{{ notification.time }}</text>
            </view>
            <text class="notification-message">{{ notification.message }}</text>
            <view class="notification-meta" v-if="notification.dueDate || notification.subject">
              <text v-if="notification.dueDate">Due: {{ notification.dueDate }}</text>
              <text v-if="notification.subject">Subject: {{ notification.subject }}</text>
            </view>
          </view>
          <view class="notification-actions">
            <u-button 
              v-if="!notification.read"
              type="primary" 
              size="mini"
              @click="markAsRead(notification)"
            >Mark Read</u-button>
            <u-button 
              type="error" 
              size="mini"
              @click="deleteNotification(notification)"
            >Delete</u-button>
          </view>
        </view>
      </view>

      <!-- Empty State -->
      <view v-if="filteredNotifications.length === 0" class="empty-state">
        <u-icon name="bell" size="64" color="#ccc"></u-icon>
        <text>No notifications to display</text>
      </view>
    </scroll-view>

    <!-- Settings FAB -->
    <view class="fab">
      <u-button 
        type="primary" 
        shape="circle"
        icon="setting"
        @click="openSettings"
      ></u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'all',
      tabs: [
        { label: 'All', value: 'all' },
        { label: 'Unread', value: 'unread' },
        { label: 'Assignments', value: 'assignment' },
        { label: 'Reminders', value: 'reminder' },
        { label: 'Updates', value: 'update' }
      ],
      notifications: [
        {
          id: 1,
          type: 'assignment',
          title: 'Math Assignment Due',
          message: 'Your calculus assignment is due tomorrow at 11:59 PM.',
          time: '2 hours ago',
          read: false,
          dueDate: '2024-03-16 23:59',
          subject: 'Mathematics'
        },
        {
          id: 2,
          type: 'reminder',
          title: 'Study Group Meeting',
          message: 'Don\'t forget about the physics study group meeting today.',
          time: '5 hours ago',
          read: true,
          dueDate: '2024-03-15 15:00',
          subject: 'Physics'
        },
        {
          id: 3,
          type: 'update',
          title: 'Course Material Updated',
          message: 'New lecture notes have been uploaded for Chemistry.',
          time: '1 day ago',
          read: false,
          subject: 'Chemistry'
        }
      ]
    }
  },
  computed: {
    filteredNotifications() {
      if (this.activeTab === 'all') return this.notifications
      if (this.activeTab === 'unread') return this.notifications.filter(n => !n.read)
      return this.notifications.filter(n => n.type === this.activeTab)
    }
  },
  methods: {
    getNotificationIcon(type) {
      const icons = {
        'assignment': 'file-text',
        'reminder': 'clock',
        'update': 'info-circle',
        'alert': 'alert-circle'
      }
      return icons[type] || 'bell'
    },
    getNotificationColor(type) {
      const colors = {
        'assignment': '#4b7bec',
        'reminder': '#ffa502',
        'update': '#20bf6b',
        'alert': '#eb3b5a'
      }
      return colors[type] || '#778ca3'
    },
    markAsRead(notification) {
      notification.read = true
      uni.showToast({
        title: 'Marked as read',
        icon: 'success'
      })
    },
    deleteNotification(notification) {
      uni.showModal({
        title: 'Confirm Delete',
        content: 'Are you sure you want to delete this notification?',
        success: (res) => {
          if (res.confirm) {
            this.notifications = this.notifications.filter(n => n.id !== notification.id)
            uni.showToast({
              title: 'Notification deleted',
              icon: 'success'
            })
          }
        }
      })
    },
    showAddNotification() {
      uni.navigateTo({
        url: '/pages/more/notification/add'
      })
    },
    openSettings() {
      uni.navigateTo({
        url: '/pages/more/notification/settings'
      })
    }
  }
}
</script>

<style scoped>
.container {
  flex: 1;
  background-color: #f8f9fa;
}

.header {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.filter-tabs {
  background-color: #fff;
  padding: 10rpx 0;
  border-bottom: 1px solid #eee;
}

.tabs-scroll {
  white-space: nowrap;
}

.tabs {
  display: flex;
  padding: 0 10rpx;
}

.tab {
  padding: 10rpx 30rpx;
  margin-right: 20rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #666;
  background-color: #f0f0f0;
}

.tab.active {
  color: #fff;
  background-color: #4b7bec;
}

.content {
  flex: 1;
  padding: 20rpx;
}

.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.notification-card {
  display: flex;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
}

.notification-card.unread {
  border-left: 4rpx solid #4b7bec;
}

.notification-icon {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.notification-content {
  flex: 1;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8rpx;
}

.notification-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.notification-time {
  font-size: 24rpx;
  color: #999;
}

.notification-message {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 8rpx;
  line-height: 1.4;
}

.notification-meta {
  display: flex;
  gap: 20rpx;
  font-size: 24rpx;
  color: #888;
}

.notification-actions {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  margin-left: 20rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
  gap: 20rpx;
}

.fab {
  position: fixed;
  right: 30rpx;
  bottom: 30rpx;
}
</style> 